<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .none {
            -webkit-filter: none;
        }
        .blur {
            -webkit-filter: blur(3px);
        }
        .grayscale {
            -webkit-filter: grayscale(1);
        }
        .inver {
            -webkit-filter: invert(1);
        }
        .sepia {
            -webkit-filter: sepia(1);
        }
        .output {
            height: 500px;
            width: 293px;
            word-break: break-all;
            background-color: #eee;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <label for="">audio Source</label>
        <select  id="audioSource"></select>
    </div>
    <div>
        <label for="">audio Output</label>
        <select  id="audioOutput"></select>
    </div>
    <div>
        <label for="">video Source</label>
        <select  id="viodeSource"></select>
    </div>
    <div>
        <label for="">Filter:</label>
        <select name="" id="filter">
            <option value="none">None</option>
            <option value="blur">blur</option>
            <option value="grayscale">grayscale</option>
            <option value="invert">invert</option>
            <option value="sepia">sepia</option>
        </select>
    </div>

    <div>
        <!-- <audio  autoplay controls id="audioplayer"></audio> -->
        <table>
            <tr>
                <td>
                    <video autoplay playsinline  id="player"></video>
                </td>
                <td><video  playsinline id="recplayer"></video></td>
                <td>
                    <div id="constraints" class="output"></div>
                </td>
            </tr>
            <tr>
                <td><button id="record">Start Record</button></td>
                <td><button id="recplay" disabled>Play</button></td>
                <td><button id="download" disabled>Download</button></td>
            </tr>
        </table>
        

    </div>
    <div>
        <button id="snapshot">Take snapshot</button>
    </div>
    <div>
        <canvas id="picture"></canvas>
    </div>

    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script> -->
    <script src="./js/adapter.min.js"></script>
    <script src="./js/media.js"></script>
    
</body>
</html>